<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打卡计划详情</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#EC4899'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.95); }
}
.pulse { animation: pulse 0.5s ease-in-out; }
.progress-ring {
transform: rotate(-90deg);
}
.progress-ring__circle {
stroke-dasharray: 251.2;
stroke-dashoffset: 251.2;
transition: stroke-dashoffset 0.35s;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
<div class="max-w-md mx-auto bg-white min-h-screen pb-20">
<!-- 顶部导航 -->
<nav class="fixed top-0 left-0 right-0 bg-white shadow-sm z-10 px-4 py-3 flex justify-between items-center">
    <button onclick="window.location.href='d:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\plans.html'"
            class="text-gray-600">
        <i class="fas fa-chevron-left text-lg" style="width: 24px; height: 24px; display: flex; justify-content: center; align-items: center;"></i>
    </button>
    <h1 class="text-lg font-semibold">打卡详情</h1>
    <button class="text-gray-600">
        <i class="fas fa-ellipsis-v text-lg" style="width: 24px; height: 24px; display: flex; justify-content: center; align-items: center;"></i>
    </button>
</nav>
<!-- 主要内容 -->
<div class="pt-16 pb-24 px-4">
<!-- 计划信息 -->
<div class="text-center mb-8">
<h2 class="text-2xl font-bold mb-1">每日阅读计划</h2>
<p class="text-gray-500 text-sm">第8周（共16周）</p>
</div>
<!-- 打卡核心区域 -->
<div class="relative flex flex-col items-center mb-10">
<div class="relative w-48 h-48 mb-4">
<svg class="progress-ring w-full h-full absolute top-0 left-0" viewBox="0 0 80 80">
<circle class="progress-ring__circle stroke-gray-200" stroke-width="4" fill="transparent" r="40" cx="40" cy="40"/>
<circle class="progress-ring__circle stroke-primary" stroke-width="4" fill="transparent" r="40" cx="40" cy="40" stroke-dashoffset="75.36"/>
</svg>
<button onclick="goToCheckinPage()" 
        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-primary rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition-all duration-200">
    <span class="text-white text-xl font-bold">打卡</span>
</button>

<script>
    // 获取计划ID和类型
    function getPlanId() {
        return new URLSearchParams(window.location.search).get('id') || '1';
    }
    
    function getCheckinType() {
        const params = new URLSearchParams(window.location.search);
        return params.get('type') || 'day'; // 默认为天打卡
    }

    // 跳转到对应打卡页面
    function goToCheckinPage() {
        const checkinType = getCheckinType();
        window.location.href = `d:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\checkin-${checkinType}.html?planId=${getPlanId()}&type=${checkinType}`;
    }

    // 返回按钮点击事件
    document.querySelector('nav button:first-child').addEventListener('click', function() {
        window.location.href = 'd:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\plans.html';
    });
</script>
</div>
<div class="text-center">
<p class="text-gray-700 mb-1">本周已完成 3/7 天</p>
<p class="text-sm text-gray-500">完成率 42.9%</p>
</div>
</div>
<!-- 历史记录 -->
<div>
<h3 class="text-lg font-semibold mb-4">打卡记录</h3>
<div class="space-y-3">
<!-- 记录卡片 -->
<div class="bg-white rounded-lg shadow-sm p-4 border border-gray-100">
<div class="flex">
<div class="flex-shrink-0 mr-3">
<div class="w-12 h-12 rounded-md bg-gray-100 overflow-hidden">
<img src="https://ai-public.mastergo.com/ai/img_res/7e3267cf689411ded7701f87614ece64.jpg"
class="w-full h-full object-cover" alt="打卡图片">
</div>
</div>
<div class="flex-1">
<div class="flex justify-between items-start mb-1">
<p class="text-sm font-medium text-gray-700">5月20日 21:15</p>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
<i class="fas fa-check-circle mr-1" style="width: 12px; height: 12px; display: flex; justify-content: center; align-items: center;"></i>
已完成
</span>
</div>
<p class="text-sm text-gray-600 line-clamp-2">今天阅读了《设计心理学》第三章，了解了用户心理模型的重要性，做了详细的笔记。</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-4 border border-gray-100">
<div class="flex">
<div class="flex-shrink-0 mr-3">
<div class="w-12 h-12 rounded-md bg-gray-100 overflow-hidden">
<img src="https://ai-public.mastergo.com/ai/img_res/e922dec385b07b17231a0e8f8f048fcb.jpg"
class="w-full h-full object-cover" alt="打卡图片">
</div>
</div>
<div class="flex-1">
<div class="flex justify-between items-start mb-1">
<p class="text-sm font-medium text-gray-700">5月19日 20:30</p>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
<i class="fas fa-check-circle mr-1" style="width: 12px; height: 12px; display: flex; justify-content: center; align-items: center;"></i>
已完成
</span>
</div>
<p class="text-sm text-gray-600 line-clamp-2">阅读了《用户体验要素》的前两章，对战略层和范围层有了新的认识，准备明天继续深入学习。</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-4 border border-gray-100">
<div class="flex">
<div class="flex-shrink-0 mr-3">
<div class="w-12 h-12 rounded-md bg-gray-100 overflow-hidden">
<img src="https://ai-public.mastergo.com/ai/img_res/06f2f7059d100de9e6e5c5e134754258.jpg"
class="w-full h-full object-cover" alt="打卡图片">
</div>
</div>
<div class="flex-1">
<div class="flex justify-between items-start mb-1">
<p class="text-sm font-medium text-gray-700">5月18日 22:05</p>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
<i class="fas fa-check-circle mr-1" style="width: 12px; height: 12px; display: flex; justify-content: center; align-items: center;"></i>
已完成
</span>
</div>
<p class="text-sm text-gray-600 line-clamp-2">今天工作较忙，只阅读了30分钟《交互设计精髓》，重点学习了用户研究方法部分。</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-4 border border-gray-100">
<div class="flex">
<div class="flex-shrink-0 mr-3">
<div class="w-12 h-12 rounded-md bg-gray-100 overflow-hidden">
<img src="https://ai-public.mastergo.com/ai/img_res/0f5592cf6465ffe8d54795335d674fe5.jpg"
class="w-full h-full object-cover" alt="打卡图片">
</div>
</div>
<div class="flex-1">
<div class="flex justify-between items-start mb-1">
<p class="text-sm font-medium text-gray-700">5月17日 19:45</p>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
<i class="fas fa-times-circle mr-1" style="width: 12px; height: 12px; display: flex; justify-content: center; align-items: center;"></i>
未完成
</span>
</div>
<p class="text-sm text-gray-600 line-clamp-2">今天加班到很晚，没有时间阅读，明天会补上双倍的阅读量。</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-4 border border-gray-100">
<div class="flex">
<div class="flex-shrink-0 mr-3">
<div class="w-12 h-12 rounded-md bg-gray-100 overflow-hidden">
<img src="https://ai-public.mastergo.com/ai/img_res/867581fa0b256b5935c8e9eb81442266.jpg"
class="w-full h-full object-cover" alt="打卡图片">
</div>
</div>
<div class="flex-1">
<div class="flex justify-between items-start mb-1">
<p class="text-sm font-medium text-gray-700">5月16日 21:20</p>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
<i class="fas fa-check-circle mr-1" style="width: 12px; height: 12px; display: flex; justify-content: center; align-items: center;"></i>
已完成
</span>
</div>
<p class="text-sm text-gray-600 line-clamp-2">完成了《设计中的设计》最后一章的阅读，做了详细的思维导图笔记，收获很大。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部操作按钮 -->
<div class="px-4 pb-24">
<button class="w-full py-3 bg-red-500 text-white font-medium rounded-button flex items-center justify-center">
<i class="fas fa-trash-alt mr-2" style="width: 16px; height: 16px; display: flex; justify-content: center; align-items: center;"></i>
作废计划
</button>
</div>
<script>
document.getElementById('checkin-btn').addEventListener('click', function() {
this.classList.add('pulse');
setTimeout(() => {
this.classList.remove('pulse');
// 这里可以添加打卡成功的逻辑
}, 500);
});
</script>
</body>
</html>
